<template>
  <div class="searchIndex">
    <div class="history" >
      <div class="text">
        <span>历史搜索</span>
        <van-icon name="delete-o" @click="remove()"/>
      </div>
      <div class="history_list" v-if="searchList.length != 0">
        <span v-for="(item,index) in searchList" :key="index" @click="goSearchList(item)">{{item}}</span>
      </div>
        <div class="empty" v-else>暂无历史搜索 . . .</div>
    </div>
    <div class="found">
      <h2>搜索发现</h2>
      <div>
        <span v-for="(item,index) in foundlist" :key="index"> {{item}} </span>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { mapState } from 'vuex';
export default {
    data(){
        return{
            historylist:[],
            foundlist:['麻辣烫','米线','披萨','蛋糕','汉堡','腊八粥','烤肉拌饭','炸鸡','味多美（温阳路店）']
        }
    },
    created(){
        console.log(this.$route);
        this.historylist = JSON.parse(localStorage.getItem('searchList')) || []
    },
    computed:{
      ...mapState(['searchList'])
    },
    methods:{
        remove(){
            Dialog.confirm({
                title: '提示',
                message: '确定要清空历史搜索吗？',
            }).then(() => {
              this.$store.commit('search_sub')
              searchList=[]
            }).catch(() => {
              
            });
        },
        goSearchList(item){
            this.$router.push({
                path:"/searchview/list",
                query:{key:item}
            })
        }
        
    }


}
</script>

<style scoped lang="scss">
.searchIndex{
    margin: 0 .4rem;
    .history{
    margin-top: .5333rem;
    .text{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .4rem;
      span{
        font-size: .5333rem;
        font-weight: bold;
      }
      i{
        font-size: .5333rem;
        color: #ccc;
      }
    }
    .history_list{
      font-size: .3733rem;
      display: flex;
      flex-wrap: wrap;
      span{
        background-color: #eee;
        margin: 0 .2667rem .2667rem 0;
        padding: .2667rem .4rem;
        border-radius: .1333rem;
      }
    }
  }
  .empty{
    width: 100%;
    font-size: .48rem;
    color: #ccc;
  }
  .found{
    h2{
      margin:  .5333rem 0;
      font-size: .5333rem;
    }
    div{
      font-size: .3733rem;
      display: flex;
      flex-wrap: wrap;
      span{
        background-color: #eee;
        margin: 0 .2667rem .2667rem 0;
        padding: .2667rem .4rem;
        border-radius: .1333rem;
      }

    }
  }
}

</style>